body > div {
  height: 100%;
  @include flexbox();
  @include flex-direction(column);
}

$baseColor: #8a5899;

.index-container {
  @include flex(1);
  width: 100%;
  overflow: hidden;
  background: #eee;
}

footer {
  height: 44px;
  ul {
    width: 100%;
    height: 100%;
    @include flexbox();
    @include align-items(center);
    @include justify-content(center);
    border-top: solid 0.5px #d9d9d9;
    li {
      @include flex(1);
      @include flexbox();
      @include flex-direction(column);
      @include align-items(center);
      @include justify-content(center);
      &.active b {
        color: $baseColor;
      }
      &.active i{
          display: none;
      }
      &.active em{
          display: block;
      }
      b, i, em {
        font-weight: normal;
        color: #bbb;
      }
      i {

        width: 20px;
        height: 20px;
        line-height: 20px;
      }
      em{
          display: none;
      }
      img{
          width: 20px;
          height: 20px;
      }
      b {
          padding-top:4px;
          font-weight: bold;
          font-size: 12px;
      }
    }
  }
}
.goto-transition {
  transition: transform .3s ease;
}
.goto-enter{
  transform: translate(100%,0);
}
.goto-leave {
  transform: translate(-100%,0);
}

.back-transition {
  transition: transform .3s ease;
}
.back-enter{
  transform: translate(-100%,0);
}
.back-leave {
  transform: translate(100%,0);
}
